<template>
  <el-dialog
    title="编辑病区信息"
    :visible.sync="dialogVisible"
    :before-close="cancelDialog"
    :close-on-click-modal="false"
    class="mod_box"
    custom-class="role-mask"
  >
    <el-form ref="dialogInfo" class="form" label-width="86px">
      <el-form-item label="病区编码 : " prop="ward_code">
        <el-input
          v-model="dialogInfo.ward_code"
          :disabled="true"
          class="bianji"
        />
      </el-form-item>
      <el-form-item label="病区名称 : " prop="ward_name">
        <el-input v-model="dialogInfo.ward_name" class="bianji" />
      </el-form-item>
      <el-form-item label="状态 : ">
        <el-switch
          v-model="dialogInfo.status"
          class="tablescope1"
          inactive-text="禁用"
          active-text="启用"
          :active-value="1"
          :inactive-value="2"
          active-color="#02538C"
          inactive-color="#B9B9B9"
        />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancelDialog_quxiao">取 消</el-button>
      <el-button
        type="primary"
        @click="cancelDialog(dialogInfo)"
      >保 存</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { wardedit } from '@/api/table'

export default {
  name: 'Lisecome',
  components: {},
  // 父组件 传 过来的 值
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    dialogInfo: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      dialogInfo: {
        ward_name: '',
        ward_code: ''
      },

      list: {
        bed_name: '',
        id: '',
        sattus: ''
      }
    }
  },
  data() {
    return {}
  },
  watch: {
    // 监听 弹窗显示， 可以用来写 请求接口
    dialogVisible: function(newVal, oldVal) {
      if (newVal) {
        console.log(newVal)
      }
    }
  },
  created() {},
  mounted() {},
  methods: {
    cancelDialog_quxiao() {
      this.$emit('update:dialogVisible', false)
    },
    // 修改父组件传过来的值
    cancelDialog(dialogInfo) {
      this.$emit('update:dialogVisible', false)
          wardedit({
            id: this.dialogInfo.id,
            status: this.dialogInfo.status,
            wardName: this.dialogInfo.ward_name
          }).then((res) => {})
    }
  }
}
</script>
<style lang='scss' scoped>
.form {
  padding: 0 10px;
}

//弹窗中的状态
.tablescope1 {
  position: relative !important;
  left: -37px !important;

  ::v-deep .el-switch__label--left {
    position: relative;
    left: 59px;
    color: #fff;
    z-index: -1111;
  }
  ::v-deep .el-switch__core {
    width: 58px !important;
  }
  ::v-deep .el-switch__label--right {
    position: relative;
    right: 59px;
    color: #fff;
    z-index: -1111;
  }
  ::v-deep .el-switch__label--right.is-active {
    z-index: 1111;
    color: #fff !important;
  }
  ::v-deep .el-switch__label--left.is-active {
    z-index: 1111;
    color: #9c9c9c !important;
  }
}
.role-mask {
  border-radius: 6px;
}
.role-mask .el-dialog__header {
  border-bottom: 1px solid #e8eaec;
}

.role-mask .el-dialog__body {
  padding: 16px 16px 0px;
  color: #606266;
  font-size: 14px;
  word-break: break-all;
}

.role-mask .el-dialog__footer {
  border-top: 1px solid #e8eaec;
}

@media screen and (min-width: 1200px) and (max-width:1365px) {
  .form .bianji {
    width: 93%;
  }
  .form .mod_box {
    width: 66%;
  }
}

@media screen and (min-width: 1366px) and (max-width:1600px) {
  .form .bianji {
    width: 93%;
  }
  .form .mod_box {
    width: 60%;
  }
}
@media screen and (min-width: 1800px) {
  .form .bianji {
    width: 94%;
  }
  .form .mod_box {
    width: 44%;
    margin-left: 28%;
  }
}
</style>
